<template>
    <div class="center">
        <div class="nav">
            <el-row class='row-one'>
              <el-col :span="6"><router-link to='/guide/'>热门</router-link></el-col>
              <el-col :span="6"><router-link to='/guide/Asia/'>亚洲</router-link></el-col>
              <el-col :span="6"><router-link to='/guide/europe/'>欧洲</router-link></el-col>
              <el-col :span="6"><router-link to='/guide/north-america/'>北美洲</router-link></el-col>
            </el-row>

            <el-row class='row-two'>
              <el-col :span="6"><router-link to='/guide/south-america/'>南美洲</router-link></el-col>
              <el-col :span="6"><router-link to='/guide/oceania/'>大洋洲</router-link></el-col>
              <el-col :span="6"><router-link to='/guide/africa/'>非洲</router-link></el-col>
              <el-col :span="6"><router-link to='/guide/antarctica/'>南极洲</router-link></el-col>
            </el-row>
        </div>
    </div>
</template>


<script type="text/javascript">
    export default {
        name:'GuideMenu',
    }
</script>

<style type="text/css" scoped lang="less">

    .center{

        .router-link-exact-active{

            background-color: #ED323C;
            padding: 0.2em 0.5em;
            border-radius: 4px;
            color:#fff;

        }
        background-color: #fff;
        .nav{

            .row-one,.row-two{
                text-align: center;
                padding:0.5em 0;
                a{
                    color:#333;
                    text-decoration: none;
                }
                div:not(:last-child){
                    border-right:2px solid rgba(3,3,3,0.05);
                }
            }
            .row-one{
                border-bottom: 2px solid rgba(3,3,3,0.05);
                // div:first-child{
                //     a:first-child{
                //         background-color: #ED323C;
                //         padding: 0.2em 0.5em;
                //         border-radius: 4px;
                //         color:#fff;
                //     }
                // }
            }
        }
    }

</style>
